import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as action from '../../action/index'

class Shop extends Component {

    componentDidMount() {
        this.props.getList()
    }

    render() { 
        let { list } = this.props
        return (
            <div onClick={() => {
                this.props.setName()
            }}>
                {this.props.name}
                <ul>
                    {
                        list && list.length ? list.map((item,index) => {
                            return <li key={index}>{item.title}</li>
                        }) : ''
                    }
                </ul>
            </div>
        )
    }
}

let mapStateToProps = ({ShopReducer}) => {
    return {
        ...ShopReducer
    }
}

let mapDispatchToProps = (dispatch) => bindActionCreators(action, dispatch)
 
export default connect(mapStateToProps, mapDispatchToProps)(Shop)